import CustomComponent from '@comp/hhd/design/FormDesigner/field/comps/custom/CustomComponent';
import $ from 'jquery';
import {guid} from '@/utils';

export default class Title2 extends CustomComponent {
  getFieldComponentTitle() {
    return '标题组件(2)';
  }

  getFieldComponentName() {
    return 'title2';
  }

  setFieldTitle(el, fieldConfig) {
    $(el).find('.title2').html(fieldConfig.title);
  }

  getDefaultConfig() {
    return new Promise((resolve, reject) => {
      resolve(createDefaultButtonConfig());
    });
  }

  createFieldElement() {
    return new Promise((resolve, reject) => {
      resolve(createTitleElement());
    });
  }
}

function createTitleElement() {
  return $(`  <div style="border-bottom: 2px solid #0077ff">
    <div style="background: #0077ff; position: relative; padding: 0 15px; height: 35px; width: fit-content; display: flex; align-items: center; justify-content: center; color: white">
      <span class="title2">标题名称</span>
      <div style="border-right: 20px solid transparent; border-bottom: 37px solid #0077ff;left: 100%; top: 0; position: absolute"></div>
      <div style="width: 15px; height: 33px; margin-top: -2px; transform: skew(30deg);background: #66adff; position: absolute; left: calc(100% + 16px)"></div>
      <div style="width: 15px; height: 33px; margin-top: -2px; transform: skew(30deg);background: #99c9ff; position: absolute; left: calc(100% + 37px)"></div>
      <div style="width: 15px; height: 33px; margin-top: -2px; transform: skew(30deg);background: #cce4ff; position: absolute; left: calc(100% + 59px)"></div>
    </div>
  </div>`)[0];
}

export function createDefaultButtonConfig() {
  return {
    id: guid(),
    component: 'title2',
    title: '标题名称',
    customComponent: true,
    viewComponent: true
  };
}